<template>
  <div class="app-container">
    <div class="top-container">
      <el-radio-group v-model="type" @change="search">
        <el-radio-button :label="1">FAM</el-radio-button>
        <el-radio-button :label="2">HEX</el-radio-button>

      </el-radio-group>
      <el-button type="primary" style="float:right;" @click="downloadFile">下载</el-button>
    </div>
    <table-list
      show-index
      :columns="columns"
      :page-size="listQuery.pageSize"
      :page-num="listQuery.currPage"
      :data="list"
      :total="total"
      style="margin-top: 20px;"
      @currentChange="handlePageChange"
    />
  </div>
</template>

<script>
import { qpcrreportProvider } from '@/api/api'
import tableList from '@/components/table/tableList.vue'
import moment from 'moment'

export default {
  name: 'ReportManagementIndex',
  components: {
    tableList
  },
  data() {
    return {
      listQuery: {
        currPage: 1,
        pageSize: 15,
        name: ''
      },
      total: 1,
      columns: [
        { text: 'A1', value: 'a1' },
        { text: 'A2', value: 'a2' },
        { text: 'A3', value: 'a3' },
        { text: 'A4', value: 'a4' },
        { text: 'A5', value: 'a5' },
        { text: 'A6', value: 'a6' },
        { text: 'A7', value: 'a7' },
        { text: 'A8', value: 'a8' },
        { text: 'B1', value: 'b1' },
        { text: 'B2', value: 'b2' },
        { text: 'B3', value: 'b3' },
        { text: 'B4', value: 'b4' },
        { text: 'B5', value: 'b5' },
        { text: 'B6', value: 'b6' },
        { text: 'B7', value: 'b7' },
        { text: 'B8', value: 'b8' }
      ],
      list: [],
      id: '',
      type: 1
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.getList()
  },
  methods: {
    search() {
      this.listQuery.currPage = 1
      this.getList()
    },
    getList() {
      const params = {
        id: this.id,
        type: this.type
      }
      qpcrreportProvider.data(params).then(res => {
        // console.log(res)
        if (res.code === 0) {
          this.list = res.data
        }
      })
    },
    downloadFile(type) {
      console.log('Downloading')
      // const _type = type || 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'

      // const params = {
      //   id: this.id,
      //   type: this.type
      // }
      // const url = process.env.VUE_APP_BASE_API + '/renren-admin/qpcr/qpcrreport/export/' + this.id + '/' + this.type
      // window.open(url, '_blank')

      const x = new XMLHttpRequest()
      x.open('GET', process.env.VUE_APP_BASE_API + '/renren-admin/qpcr/qpcrreport/export/' + this.id + '/' + this.type, true)
      x.responseType = 'blob'
      x.onload = function(e) {
        const url = window.URL.createObjectURL(x.response)
        const a = document.createElement('a')
        a.href = url
        a.download = moment().format('YYYY-MM-DD HH:mm:ss') + '.xls'
        a.click()
      }
      x.send()

      // axios.post(process.env.VUE_APP_BASE_API + '/renren-admin/qpcr/qpcrreport/download', params, { headers: { token: getToken() }}).then(res => {
      // // qpcrreportProvider.download(params).then(res => {
      //   var blob = new Blob([res], {
      //     type: _type
      //   })
      //   var downloadElement = document.createElement('a')
      //   var href = window.URL.createObjectURL(blob) // 创建下载的链接
      //   downloadElement.href = href
      //   debugger
      //   downloadElement.download = decodeURI(res.headers.attachment) // 下载后文件名
      //   // downloadElement.download = 'aaa.xls'
      //   document.body.appendChild(downloadElement)
      //   downloadElement.click() // 点击下载
      //   document.body.removeChild(downloadElement) // 下载完成移除元素
      //   window.URL.revokeObjectURL(href)
      // })
    },
    handlePageChange(val) {
      this.listQuery.currPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
  .top-container{
    width: 100%;
    height: 36px;
    display: block;
    margin-bottom: 20px;
  }
</style>
